<template>
  <div class="about">
    <el-form :model="form">
      <el-form-item label="邮箱" :label-width="formLabelWidth">
        <el-input v-model="form.email" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="电话" :label-width="formLabelWidth">
        <el-input v-model="form.phone" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="姓名" :label-width="formLabelWidth">
        <el-input v-model="form.name" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="内容" :label-width="formLabelWidth">
        <el-input type="textarea" :rows="4" placeholder="请输入内容" v-model="form.content"></el-input>
      </el-form-item>
    </el-form>
    <div class="button">
      <el-button type="primary" @click.native="submit">提交</el-button>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      form: {
        email: "",
        phone: "",
        name: "",
        content: ""
      },
      formLabelWidth: "100px"
    };
  },
  methods: {
    submit() {
      let that = this;
      if (that.form.email == "") {
        that.$message({
          message: "邮箱不能为空",
          type: "warning"
        });
        return;
      } else if (that.form.phone == "") {
        that.$message({
          message: "手机不能为空",
          type: "warning"
        });
        return;
      } else if (that.form.name == "") {
        that.$message({
          message: "姓名不能为空",
          type: "warning"
        });
        return;
      } else if (that.form.content == "") {
        that.$message({
          message: "留言内容不能为空",
          type: "warning"
        });
        return;
      }
      let emailReg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
      let phoneReg = /^1(3|4|5|6|7|8|9)\d{9}$/;
      if (!emailReg.test(that.form.email)) {
        that.$message({
          message: "邮箱格式错误",
          type: "warning"
        });
        return;
      }
      if (!phoneReg.test(that.form.phone)) {
        that.$message({
          message: "手机格式错误",
          type: "warning"
        });
        return;
      }
      that
        .$ajax({
          url: "/set/leave/message",
          method: "post",
          data: that.form
        })
        .then(
          res => {
            if (res.data.code == 200) {
              that.form.email = "";
              that.form.phone = "";
              that.form.name = "";
              that.form.content = "";
              that.$message({
                message: res.data.message,
                type: "success"
              });
            } else {
              that.$message({
                message: res.data.message,
                type: "warning"
              });
            }
          },
          res => {
            console.log(res);
          }
        );
    }
  }
};
</script>
<style scoped>
.about {
  width: 100%;
}
.el-form {
  padding-right: 20px;
  margin-top: 40px;
}
.button {
  text-align: center;
}
</style>